import React, { memo } from 'react';
import Lazyload from 'react-lazyload'
import loading from '../../../../assets/images/loading.gif'
import './ListItem1.less'
import poster from '../../../../assets/images/懂车帝封面2.jpg'

const ListItem1 = (props) => {
    const { item } = props;
    // console.log(item.type, 'lllllllllllllllllllllllllllllllllllllllllllll')

    return (
        <>
            <div className="listitem1all">
                {
                    item.type == 1 ?
                        <>
                            <div className="box1">
                                <div className="list1">
                                    <div className="title1">
                                        {item.title}
                                        {item.type}
                                    </div>
                                    <div className="footer1">
                                        <div className="writer1">
                                            {item.writer}
                                        </div>
                                        <div className="time1">
                                            {item.time}
                                        </div>
                                    </div>
                                </div>
                                <Lazyload height={100} placeholder={
                                    <img width="100%" height="100%"
                                        src={loading}
                                    />
                                }>
                                    <div className="ListItem-content__img1">
                                        <img src={item.imgsrc3} alt="" />
                                    </div>
                                </Lazyload>
                            </div>
                            <hr style={{ opacity: "0.5" }} />

                        </>
                        : (
                            item.type == 2 ?
                                <>
                                    <div className="title2">
                                        {item.title}
                                        {item.type}
                                    </div>

                                    <div className="ListItem-img2">
                                        <div className="ListItem-content__img2">
                                            <Lazyload height={100} placeholder={
                                                <img width="100%" height="100%"
                                                    src={loading}
                                                />
                                            }>
                                                <img style={{ marginRight: "0.2rem" }} src={item.imgsrc1} alt="" />
                                                <img style={{ marginRight: "0.2rem" }} src={item.imgsrc2} alt="" />
                                                <img src={item.imgsrc3} alt="" />
                                            </Lazyload>
                                        </div>
                                        <div className="footer2">

                                            <div className="writer2">
                                                {item.writer}
                                            </div>
                                            <div className="time2">
                                                {item.time}
                                            </div>
                                        </div>
                                    </div>
                                    <hr style={{ opacity: "0.5" }} />
                                </>
                                :
                                <>
                                    <div className="title3">
                                        {item.title}
                                        {item.type}
                                    </div>
                                    <div className="ListItem-img3">
                                        <Lazyload height={100} placeholder={
                                            <img width="100%" height="100%"
                                                src={loading}
                                            />
                                        }>
                                            <div className="ListItem-content__img3" style={{ width: "100%", height: "5.1rem" }}>
                                                <video preload="true" controls poster={poster} width={350} height={190}  >
                                                    <source src="https://video.699pic.com/videos/08/39/95/b_AhjCDc0FWt281561083995_10s.mp4"
                                                        type="video/webm" />
                                                    Sorry, your browser doesn't support embedded videos.
                                                </video>
                                            </div>
                                        </Lazyload>
                                        <div className="footer-video3">
                                            <div className="writer3">
                                                {item.writer}
                                            </div>
                                            <div className="time3">
                                                {item.time}
                                            </div>
                                        </div>
                                    </div>
                                    <hr style={{ opacity: "0.5" }} />
                                </>
                        )
                }
                <p className="spanblack"></p>
            </div>
        </>
    )
}

export default ListItem1
